<template>
  <div>
    <!--
    When a ref is returned as a property on the render context (the object returned from setup()) and accessed in the template, it automatically unwraps to the inner value. There is no need to append .value in the template:
    -->
    <p>count的值为 {{ count }}</p>
    <button @click="count += 1">+1</button>
    <p>obj.a的值为 {{ obj.a }}</p>
    <button @click="obj.a += 1">+1</button>
    <p>obj.b的值为 {{ obj.b }}</p>
    <button @click="obj.b += 1">+1</button>
    <p>arr的值为 {{JSON.stringify(arr)}}</p>
    <button @click="arr.push(1)">push 1</button>
    <button @click="arr.length--">和vue2.x一样 改变数组索引也不会让视图刷新</button>
  </div>
</template>

<script>
import { ref, reactive } from "@vue/composition-api";

export default {
  setup(props, ctx) {
    /** ref也是用来创建响应式的数据的,但比reactive更加实用(内部调用的还是reactive)
     * 因为其能接受任何数据类型(最终都被包进一个RefImpl对象里,作为其value属性的值)
     * If an object is assigned as a ref's value, the object is made deeply reactive by the reactive method.*/
    const count = ref(0);

    console.log("count:", count); // RefImpl {}
    /*
  RefImpl {}
  value: 0
  get value: ƒ ()
  set value: ƒ (v)
  __proto__: Object
*/
    console.log("count.value:", count.value);

    const obj = ref({
      a: 1,
      b: 2
    });
    console.log("state:", obj); // RefImpl {}

    const arr = ref([1, 2, 3, 4, 5]);
    console.log("arr", arr); // RefImpl {}

    return {
      /** ↓在模板中就不需要通过.value访问了,会自动展开*/
      count,
      obj,
      arr
    };
  }
};
</script>

<style lang="scss" scoped></style>
